<!--
 * @Description: 退款管理
 * @Author: py
 * @Date: 2024-08-06
-->
<script setup lang="ts" name="refund-manage">
import type { VxePagerEvents } from 'vxe-table'

import { refundListApi } from '@fl/api/city-service'
import { formatTime } from '@fl/utils'
import { useRouter } from 'vue-router'

import DetailDialog from './components/detail-dialog.vue'
import RefundDialog from './components/refund-dialog.vue'
import { useDicts } from './hooks/use-dicts'
import { useForm } from './hooks/use-form'
import { useTable } from './hooks/use-table'

const { form, schema, state } = useForm()
const { gridOptions } = useTable()
const { getDictLabel } = useDicts()
const router = useRouter()

const showDetail = ref<boolean>(false)
const showRefund = ref<boolean>(false)
const detailId = ref<number>(0)
const detailData = ref<any>({})

const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})

function getList() {
    gridOptions.loading = true

    const oParams = {
        page: tablePage.currentPage,
        size: tablePage.pageSize,
        ...form.value,
    }
    refundListApi(oParams).then((res) => {
        const { records, total } = res
        tablePage.total = total
        gridOptions.data = records
    }).finally(() => {
        gridOptions.loading = false
    })
}
getList()

function search() {
    tablePage.currentPage = 1
    getList()
}
function reset() {
    form.value = {
        ...state,
    }
    tablePage.currentPage = 1
    tablePage.pageSize = 10
    getList()
}
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
    getList()
}

// 售后详情
function toSHDetail(row: any) {
    router.push({
        name: 'afterSales-detail',
        params: {
            id: row.orderLineId,
        },
    })
}
// 订单详情
function toOrderDetail(row: any) {
    router.push({
        path: '/city/life-mall-order/order-details',
        query: {
            orderId: row.orderId,
        },
    })
}
// 商品详情
function toGoodsDetail(row: any) {
    router.push({
        name: 'commodity-detail',
        params: {
            id: row.spuId,
            pageType: 'detail',
        },
    })
}
// 退款详情
function lookDetail(row) {
    // detailData.value = { ...row }
    detailId.value = row.afterSaleId
    showDetail.value = true
}
// 退款
function clickRefundBtn(row) {
    detailData.value = { ...row }
    showRefund.value = true
}
</script>

<template>
    <ElCard class="mb-20">
        <PlusForm v-model="form"
                  :columns="schema"
                  :row-props="{ gutter: 20 }"
                  label-width="80"
                  label-position="right"
        >
            <template #footer>
                <div class="ml-auto">
                    <ElButton type="primary"
                              @click="search"
                    >
                        查询
                    </ElButton>

                    <ElButton @click="reset">
                        重置
                    </ElButton>
                </div>
            </template>
        </PlusForm>
    </ElCard>

    <ElCard>
        <vxe-grid v-bind="gridOptions">
            <template #afterSaleNo="{ row }">
                <el-link type="primary"
                         :underline="false"
                         class="text-left"
                         @click="toSHDetail(row)"
                >
                    {{ row.afterSaleCode }}
                </el-link>
            </template>

            <template #orderNo="{ row }">
                <el-link type="primary"
                         :underline="false"
                         class="text-left"
                         @click="toOrderDetail(row)"
                >
                    {{ row.orderCode }}
                </el-link>
            </template>

            <template #goodsInfo="{ row }">
                <div class="flex items-center">
                    <el-image v-if="row.skuImgPath"
                              class="mr-5 w-50"
                              :src="row?.skuImgPath"
                              :preview-src-list="[row?.skuImgPath]"
                              fit="contain"
                    />

                    <el-link type="primary"
                             :underline="false"
                             class="flex-1"
                             @click="toGoodsDetail(row)"
                    >
                        <span class="line-clamp-2 text-left">{{ row.skuName }}</span>
                    </el-link>
                </div>
            </template>

            <template #refundAmount="{ row }">
                {{ `￥${row.afterSaleAmount.toFixed(2)}` }}
            </template>

            <template #shipStatus="{ row }">
                {{ getDictLabel('oOrderStatus', row.orderLineStatus) }}
            </template>

            <template #afterSaleType="{ row }">
                {{ getDictLabel('oAfterSaleType', row.afterSaleType) }}
            </template>

            <template #afterSaleReason="{ row }">
                {{ row.afterSaleReason === 0 ? '7天无理由退货' : '商品质量问题' }}
            </template>

            <template #afterSaleTime="{ row }">
                {{ formatTime(row.createTime, 'yyyy-MM-dd HH:mm:ss') }}
            </template>

            <template #status="{ row }">
                {{ getDictLabel('oAfterSaleStatus', row.status) }}
            </template>

            <template #operate="{ row }">
                <vxe-button content="查看"
                            type="text"
                            style="color: #da0004;"
                            @click="lookDetail(row)"
                />

                <vxe-button v-if="row.status === 2"
                            content="退款"
                            type="text"
                            style="color: #da0004;"
                            @click="clickRefundBtn(row)"
                />
            </template>

            <template #pager>
                <vxe-pager :current-page="tablePage.currentPage"
                           :page-size="tablePage.pageSize"
                           :total="tablePage.total"
                           :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
                           background
                           @page-change="handlePageChange"
                />
            </template>
        </vxe-grid>
    </ElCard>

    <DetailDialog v-if="showDetail"
                  :id="detailId"
                  v-model:visible="showDetail"
    />

    <RefundDialog v-if="showRefund"
                  v-model:visible="showRefund"
                  :data="detailData"
                  @success="getList"
    />
</template>

<style lang="less" scoped></style>
